<template>
  <div>
    <el-row>
      <el-col :span="30">
        <!--    搜索框-->
        <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="部署版本">
            <el-input
              v-model="queryParams.processDefinitionVersion"
              placeholder="请输入版本"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="流程名称">
            <el-input
              v-model="queryParams.processDefinitionName"
              placeholder="请输入流程名称"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="部署key">
            <el-input
              v-model="queryParams.processDefinitionKey"
              placeholder="请输入部署key"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--    按钮-->
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >部署流程定义
        </el-button>
      </el-col>
      <el-col>
        <el-table
          :data="processData"
          style="width: 100%"
          max-height="250">
          <el-table-column
            fixed
            label="序号"
            width="150">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            prop="name"
            label="流程名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="key"
            label="流程key"
            width="120">
          </el-table-column>
          <el-table-column
            prop="version"
            label="版本"
            width="120">
          </el-table-column>
          <el-table-column
            prop="category"
            label="类别"
            width="300">
          </el-table-column>
          <el-table-column
            prop="deploymentId"
            label="流程部署ID"
            width="300">
          </el-table-column>
          <el-table-column
            prop="resourceName"
            label="资源名称"
            width="150">
          </el-table-column>
          <el-table-column
            label="流程文件"
            width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handlerPreview(scope.row.key,scope.row.version, 'xml')"
                size="small">
                预览
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="流程图片"
            width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handlerPreview(scope.row.key,scope.row.version, 'image')"
                size="small">
                预览
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button
                @click="deleteRow(scope.row.deploymentId)"
                type="text"
                size="small">
                撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--    部署界面 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="upload.action"
        :on-success="success"
        :accept="upload.accept"
        :on-change="change"
        limit="1"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传.bpmn20.xml/.bpmn文件</div>
      </el-upload>
    </el-dialog>

    <!-- 预览界面 -->
    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body
               class="scrollbar">
      <pre><code class="hljs" v-html="highlightedCode(preview.data, 'xml')"></code></pre>
    </el-dialog>
    <el-dialog :title="bpmnImage.title" :visible.sync="bpmnImage.open" width="80%" top="5vh" append-to-body
               class="scrollbar">
      <div v-html="bpmnImage.data"></div>
    </el-dialog>
  </div>
</template>

<script>
import {processDefinition, fileResource, cancelDeployment} from '@/api/bpmn/activiti'
import Treeselect from "@riophae/vue-treeselect";
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";

hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

export default {
  name: `流程部署`,
  components: {Treeselect},
  data() {
    return {
      queryParams: {
        processDefinitionName: null,
        processDefinitionVersion: undefined,
        processDefinitionKey: null,
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 文件上传
      upload: {
        file: null,
        accept: ".bpmn20.xml, .bpmn",
        title: "部署流程定义",
        open: false,
        action: "http://localhost:8080/bpmn/deployment"
      },
      processData: [],
      // 预览
      preview: {
        title: "预览",
        open: false,
        data: null
      },
      bpmnImage: {
        title: "预览",
        open: false,
        data: null
      }
    }
  },
  created() {
    this.getProcessDefinition()
  },
  methods: {
    change(file, fileList) {
      this.upload.file = file
    },
    /**
     * 获取流程定义
     */
    getProcessDefinition() {
      processDefinition(this.queryParams).then(res => {
        this.processData = res.rows
        this.queryParams.total = res.total
      })
    },
    /** 搜索 */
    handleQuery() {
      this.getProcessDefinition()
    },
    /** 重置 */
    resetQuery() {
      this.queryParams = {}
      this.getProcessDefinition()
    },
    handleAdd() {
      this.upload.open = true
    },
    /** 文件上传成功 */
    success() {
      this.$message.success('上传成功')
      this.upload.open = false
      this.$refs.upload.clearFiles()
      this.getProcessDefinition()
    },
    /** 文件上传按钮 */
    submitUpload() {
      const fileName = this.upload.file.name;
      let fileType = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
      if (fileType === 'bpmn') {
        this.$refs.upload.submit()
        this.upload.open = false
        return
      }
      let lastDotIndex = fileName.lastIndexOf('.');
      if (lastDotIndex === -1) {
        this.$message.error('文件类型不符')
        return;
      }
      let secondLastDotIndex = fileName.lastIndexOf('.', lastDotIndex - 1);
      fileType = fileName.substring(secondLastDotIndex + 1)
      if (fileType === 'bpmn20.xml') {
        this.$refs.upload.submit()
        this.upload.open = false
        return
      }
      this.$message.error('文件类型不符')
    },
    /** 高亮显示 */
    highlightedCode(code, language) {
      const result = hljs.highlight(language, code || "", true);
      return result.value || '&nbsp;';
    },
    handlerPreview(deploymentKey, deploymentVersion, resourceType) {
      if (resourceType === 'xml') {
        fileResource({deploymentKey, deploymentVersion, resourceType})
          .then(res => {
            this.preview.data = res
            this.preview.open = true
          })
      } else {
        fileResource({deploymentKey, deploymentVersion, resourceType})
          .then(res => {
            this.bpmnImage.data = res
            this.bpmnImage.open = true
          })
      }
    },
    /** 撤销流程 */
    deleteRow(deploymentId) {
      this.$confirm('确定撤销该流程吗')
        .then(() => {
          return cancelDeployment({deploymentId})
        })
        .then(() => {
          this.$message.success('撤销成功')
          this.getProcessDefinition()
        })
    }


  },
}
</script>
<style>
el-table-column {
  text-align: center;
}
</style>
